<template>
  <div ref="ranking">
    <!-- 导航 -->
    <Nav></Nav>
    <!-- 排行榜列表 -->
    <div class="ranking">
      <ul>
        <li v-for="(item, index) in data" :key="index">
          <div class="info">
            <div class="info-lt">
              <img :src="'http://api_devss.wanxikeji.cn/'+item.icon" alt="" />
            </div>
            <div class="info-rt">
              <p class="name">{{item.nick_name}}</p>
              <p class="des">这是我个人的简介</p>
              <p class="readingVolume">总阅读量：{{item.pv}}</p>
            </div>
          </div>
          <div class="follow">
            <el-button type="success" plain>关注</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Nav from "@/components/nav.vue";
export default {
  components: {
    Nav,
  },
  data() {
    return {
      data: null, // 列表数据
      page: 1, // 当前页
      el: null, // 页面最大的容器
      windowHeight: 0, // 可视窗口高度
    };
  },
  methods: {
    getListData() {
      this.axios({
        method: "post",
        url: "api/articleList",
        data: {page: this.page, size: 10}
      })
      .then(res => {
        console.log(res.data.data.data)
        if (this.page === 1)  this.data = res.data.data.data
        else 
        {
          this.data = [...this.data, ...res.data.data.data]
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 滚动条函数
    Scroll() {
      if (this.$route.name !== "authorRanking") return
      let scrollTop = document.documentElement.scrollTop
      
      if (scrollTop + this.windowHeight - this.el.offsetHeight > -1) {
        this.page ++
        this.getListData()
      }
    }
  },
  mounted() {
    // 获取初始数据
    this.getListData()
    // 滚动条监听
    window.addEventListener("scroll", this.Scroll)
    // 获取页面最大的容器
    this.el = this.$refs.ranking
    // 获取视窗高度
    this.windowHeight = window.innerHeight
  }
};
</script>


<style lang="scss" scoped>
.ranking {
  width: 960px;
  margin: 15px auto 0;

  ul {
    width: 700px;
    background-color: #fff;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px;
      border-bottom: 1px solid #f4f4f4;

      .info {
        display: flex;

        .info-lt {
          width: 50px;
          height: 50px;
          margin-right: 20px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .info-rt {
          font-size: 12px;
          color: #333;

          .name {
            font-size: 18px;
          }

          .des {
            color: #b9c0c8;
          }

          .readingVolume {
            color: #777d81;
          }
        }
      }
      
      .follow {
        button {
          padding: 0 20px;
          height: 30px;
        }
      }
    }
  }
}
</style>